@charset "utf-8";
/*reset css  重置默认的一些样式 浏览器自带的  目的是保持各种终端显示一致*/
/*所有的标签和伪类  before after*/
*,
::after,
::before {
  padding: 0;
  margin: 0;
  /*在移动端特殊的设置 */
  /*点击高亮效果*/
  -webkit-tap-highlight-color: transparent;
  /*reset css  重置默认的一些样式 浏览器自带的  目的是保持各种终端显示一致*/
  /*所有的标签和伪类  before after*/
  /*common css  也就是我们共用的css*/
  /*头部开始*/
  /*头部结束*/
  /*底部开始*/
  /*底部结束*/
  /*促销开始*/
  /*促销结束*/
  /*三级菜单开始*/
  /*三级菜单结束*/
  /*页面加载动画开始*/
  /*页面加载动画结束*/
  /*设置所有的盒子的宽度以边框开始计算*/
  -webkit-box-sizing: border-box;
  /*要兼容webket浏览器内核厂商  这种情况一般是老的移动端浏览器*/
  box-sizing: border-box;
}
@media only screen and (max-width: 1080px), only screen and (max-device-width: 1080px) {
  * html,
  ::after html,
  ::before html,
  * body,
  ::after body,
  ::before body {
    font-size: 33.75px;
  }
}
@media only screen and (max-width: 960px), only screen and (max-device-width: 960px) {
  * html,
  ::after html,
  ::before html,
  * body,
  ::after body,
  ::before body {
    font-size: 30px;
  }
}
@media only screen and (max-width: 800px), only screen and (max-device-width: 800px) {
  * html,
  ::after html,
  ::before html,
  * body,
  ::after body,
  ::before body {
    font-size: 25px;
  }
}
@media only screen and (max-width: 720px), only screen and (max-device-width: 720px) {
  * html,
  ::after html,
  ::before html,
  * body,
  ::after body,
  ::before body {
    font-size: 22.5px;
  }
}
@media only screen and (max-width: 640px), only screen and (max-device-width: 640px) {
  * html,
  ::after html,
  ::before html,
  * body,
  ::after body,
  ::before body {
    font-size: 20px;
  }
}
@media only screen and (max-width: 600px), only screen and (max-device-width: 600px) {
  * html,
  ::after html,
  ::before html,
  * body,
  ::after body,
  ::before body {
    font-size: 18.75px;
  }
}
@media only screen and (max-width: 540px), only screen and (max-device-width: 540px) {
  * html,
  ::after html,
  ::before html,
  * body,
  ::after body,
  ::before body {
    font-size: 16.875px;
  }
}
@media only screen and (max-width: 480px), only screen and (max-device-width: 480px) {
  * html,
  ::after html,
  ::before html,
  * body,
  ::after body,
  ::before body {
    font-size: 15px;
  }
}
@media only screen and (max-width: 414px), only screen and (max-device-width: 414px) {
  * html,
  ::after html,
  ::before html,
  * body,
  ::after body,
  ::before body {
    font-size: 12.9375px;
  }
}
@media only screen and (max-width: 400px), only screen and (max-device-width: 400px) {
  * html,
  ::after html,
  ::before html,
  * body,
  ::after body,
  ::before body {
    font-size: 12.5px;
  }
}
@media only screen and (max-width: 375px), only screen and (max-device-width: 375px) {
  * html,
  ::after html,
  ::before html,
  * body,
  ::after body,
  ::before body {
    font-size: 11.71875px;
  }
}
@media only screen and (max-width: 360px), only screen and (max-device-width: 360px) {
  * html,
  ::after html,
  ::before html,
  * body,
  ::after body,
  ::before body {
    font-size: 11.25px;
  }
}
@media only screen and (max-width: 320px), only screen and (max-device-width: 320px) {
  * html,
  ::after html,
  ::before html,
  * body,
  ::after body,
  ::before body {
    font-size: 10px;
  }
}
@media only screen and (max-width: 240px), only screen and (max-device-width: 240px) {
  * html,
  ::after html,
  ::before html,
  * body,
  ::after body,
  ::before body {
    font-size: 7.5px;
  }
}
* *,
::after *,
::before *,
* ::after,
::after ::after,
::before ::after,
* ::before,
::after ::before,
::before ::before {
  padding: 0;
  margin: 0;
  /*在移动端特殊的设置 */
  /*点击高亮效果*/
  -webkit-tap-highlight-color: transparent;
  /*设置所有的盒子的宽度以边框开始计算*/
  -webkit-box-sizing: border-box;
  /*要兼容webket浏览器内核厂商  这种情况一般是老的移动端浏览器*/
  box-sizing: border-box;
}
* body,
::after body,
::before body {
  font-size: 0.7rem;
  color: #000;
  font-family: "Helvetica Neue", Helvetica, STHeiTi, sans-serif !important;
  /*是设备默认的字体*/
  background: #f7f7f7;
}
* ol,
::after ol,
::before ol,
* ul,
::after ul,
::before ul {
  list-style: none;
}
* a,
::after a,
::before a {
  text-decoration: none;
  color: #333;
}
* a:hover,
::after a:hover,
::before a:hover {
  color: #333;
  text-decoration: none;
}
* input,
::after input,
::before input,
* textarea,
::after textarea,
::before textarea {
  border: none;
  outline: none;
  resize: none;
  /*特殊的属性定义  清楚浏览器给input自带的样式*/
  -webkit-appearance: none;
  /*组建默认的样式为空*/
}
* .f_left,
::after .f_left,
::before .f_left {
  float: left;
}
* .f_right,
::after .f_right,
::before .f_right {
  float: right;
}
* .clearfix::after,
::after .clearfix::after,
::before .clearfix::after,
* .clearfix::before,
::after .clearfix::before,
::before .clearfix::before {
  content: ".";
  line-height: 0;
  height: 0;
  display: block;
  visibility: hidden;
  clear: both;
}
* .clearfix,
::after .clearfix,
::before .clearfix {
  *zoom: 1;
}
* .show,
::after .show,
::before .show {
  display: block;
}
* .hide,
::after .hide,
::before .hide {
  display: none;
}
* .top_5,
::after .top_5,
::before .top_5 {
  top: 0.25rem;
}
* div.head,
::after div.head,
::before div.head {
  height: 2.5rem;
  width: 100%;
  background: #ff841d;
  border-bottom: 1px solid #e6e6e6;
}
* div.head a:nth-of-type(1),
::after div.head a:nth-of-type(1),
::before div.head a:nth-of-type(1) {
  width: 12rem;
  height: 1.25rem;
  margin: 0.65rem 0 0 0.6rem;
}
* div.head a:nth-of-type(1) img,
::after div.head a:nth-of-type(1) img,
::before div.head a:nth-of-type(1) img {
  width: 9.25rem;
}
* div.head a:nth-of-type(2),
::after div.head a:nth-of-type(2),
::before div.head a:nth-of-type(2) {
  width: 2.4rem;
  height: 2.4rem;
  margin-top: 0.5rem;
}
* div.head a:nth-of-type(2) img,
::after div.head a:nth-of-type(2) img,
::before div.head a:nth-of-type(2) img {
  width: 1.7rem;
}
* .search,
::after .search,
::before .search {
  width: 100%;
  height: 2.5rem;
  border-bottom: 1px solid #e6e6e6;
}
* .search form,
::after .search form,
::before .search form {
  display: block;
  width: 90%;
  height: 1.5rem;
  margin-top: 0.5rem;
  position: relative;
  padding-left: 0.5rem;
  border: none;
}
* .search form input:nth-of-type(1),
::after .search form input:nth-of-type(1),
::before .search form input:nth-of-type(1) {
  display: block;
  width: 100%;
  height: 1.5rem;
  border-radius: 15px;
  background: #f1f1f1;
  padding-left: 5%;
}
* .search form input:nth-of-type(2),
::after .search form input:nth-of-type(2),
::before .search form input:nth-of-type(2) {
  position: absolute;
  right: 0;
  top: 0;
  width: 3.15rem;
  height: 1.5rem;
  border-radius: 15px;
  background: #ff841d;
}
* footer,
::after footer,
::before footer {
  width: 100%;
  background: #efefef;
}
* footer .foot,
::after footer .foot,
::before footer .foot {
  width: 100%;
  border: 1px solid #ccc;
  border-top: none;
  font-size: 0.6rem;
  padding: 0.5rem 0;
  text-align: center;
}
* footer .foot .app,
::after footer .foot .app,
::before footer .foot .app {
  color: red;
}
* footer .foot .phone,
::after footer .foot .phone,
::before footer .foot .phone {
  color: #333;
}
* footer .foot span,
::after footer .foot span,
::before footer .foot span {
  color: #333;
}
* footer .foot p,
::after footer .foot p,
::before footer .foot p {
  color: #333;
  text-align: center;
}
* footer > p,
::after footer > p,
::before footer > p {
  margin-top: 0.5rem;
}
* footer > p .logn,
::after footer > p .logn,
::before footer > p .logn {
  width: 30%;
  border-right: none;
}
* footer > p > a,
::after footer > p > a,
::before footer > p > a {
  float: left;
  display: inline-block;
  border: 1px solid #ccc;
  height: 1.8rem;
  line-height: 1.8rem;
  text-align: center;
}
* footer > p .signin,
::after footer > p .signin,
::before footer > p .signin {
  width: 30%;
  border-right: none;
}
* footer > p .toTop,
::after footer > p .toTop,
::before footer > p .toTop {
  width: 40%;
}
* footer > p .toTop img,
::after footer > p .toTop img,
::before footer > p .toTop img {
  width: 0.75rem;
  margin-right: 0.15rem;
}
* .cuxiao,
::after .cuxiao,
::before .cuxiao,
* .pinpai,
::after .pinpai,
::before .pinpai {
  display: block;
  width: 100%;
  height: 1.8rem;
  background: #ff841d;
}
* .cuxiao span,
::after .cuxiao span,
::before .cuxiao span,
* .pinpai span,
::after .pinpai span,
::before .pinpai span {
  color: #fff;
  line-height: 1.75rem;
  height: 1.75rem;
  font-size: 0.9rem;
  font-weight: bold;
  padding-left: 0.5rem;
}
* .cuxiao img,
::after .cuxiao img,
::before .cuxiao img,
* .pinpai img,
::after .pinpai img,
::before .pinpai img {
  width: 1rem;
  float: right;
  margin: 0.4rem 0.5rem 0 0;
}
* .main,
::after .main,
::before .main {
  position: relative;
  margin-bottom: 2.5rem;
}
* .main > .nav,
::after .main > .nav,
::before .main > .nav {
  width: 100%;
  height: 2rem;
  line-height: 2rem;
  padding: 0 0.5rem;
  background: #ccc;
}
* .main > .nav a,
::after .main > .nav a,
::before .main > .nav a {
  display: inline-block;
}
* .main > .nav button,
::after .main > .nav button,
::before .main > .nav button {
  height: 1.5rem;
  width: 2rem;
  margin-top: 0.25rem;
  line-height: 1.5rem;
  border-radius: 5px;
}
* .main .page,
::after .main .page,
::before .main .page {
  width: 100%;
  margin: 1rem 0;
  height: 1.7rem;
  text-align: center;
  position: absolute;
  bottom: -2.5rem;
}
* .main .page button,
::after .main .page button,
::before .main .page button {
  float: left;
  width: 33%;
  height: 1.7rem;
  border-radius: 5px;
}
* .main .page ul,
::after .main .page ul,
::before .main .page ul {
  float: left;
  width: 33%;
  padding: 0 0.5rem;
  border: 1px solid #ccc;
  background: #fff;
}
* .main .page ul li,
::after .main .page ul li,
::before .main .page ul li {
  text-align: center;
  width: 100%;
  height: 1.7rem;
  line-height: 1.7rem;
  z-index: 10;
}
* .pro_list,
::after .pro_list,
::before .pro_list {
  width: 100%;
}
* .pro_list li,
::after .pro_list li,
::before .pro_list li {
  margin: 0;
  padding: 0.5rem 0.4rem;
  width: 100%;
}
* .pro_list li a.media_list,
::after .pro_list li a.media_list,
::before .pro_list li a.media_list {
  display: block;
  width: 100%;
  height: 100%;
}
* .media-left > img,
::after .media-left > img,
::before .media-left > img {
  display: block;
  width: 6rem;
  height: 6rem;
}
* .media-body .p1,
::after .media-body .p1,
::before .media-body .p1 {
  color: #333333;
  word-break: break-all;
  font-size: 0.75rem;
  line-height: 1.4rem;
  height: 2.8rem;
  overflow: hidden;
  -webkit-line-clamp: 2;
  display: -webkit-box;
  -webkit-box-orient: vertical;
}
* .media-body .p2,
::after .media-body .p2,
::before .media-body .p2 {
  color: #ed0000;
  font-size: 0.9rem;
  overflow: hidden;
  margin-top: 0.3rem;
}
* .media-body .p3,
::after .media-body .p3,
::before .media-body .p3 {
  color: #a1a1a1;
  line-height: 1.05rem;
}
* .spinner,
::after .spinner,
::before .spinner {
  margin: 5rem auto;
  width: 2.5rem;
  height: 3rem;
  text-align: center;
  font-size: 0.5rem;
  position: fixed;
  right: 0;
  left: 0;
}
* .spinner > div,
::after .spinner > div,
::before .spinner > div {
  background-color: #67CF22;
  height: 100%;
  width: 0.3rem;
  display: inline-block;
  -webkit-animation: stretchdelay 1.2s infinite ease-in-out;
  animation: stretchdelay 1.2s infinite ease-in-out;
}
* .spinner .rect2,
::after .spinner .rect2,
::before .spinner .rect2 {
  -webkit-animation-delay: -1.1s;
  animation-delay: -1.1s;
}
* .spinner .rect3,
::after .spinner .rect3,
::before .spinner .rect3 {
  -webkit-animation-delay: -1s;
  animation-delay: -1s;
}
* .spinner .rect4,
::after .spinner .rect4,
::before .spinner .rect4 {
  -webkit-animation-delay: -0.9s;
  animation-delay: -0.9s;
}
* .spinner .rect5,
::after .spinner .rect5,
::before .spinner .rect5 {
  -webkit-animation-delay: -0.8s;
  animation-delay: -0.8s;
}
@-webkit-keyframes stretchdelay {
  0%,
  100%,
  40% {
    -webkit-transform: scaleY(0.4);
  }
  20% {
    -webkit-transform: scaleY(1);
  }
}
@keyframes stretchdelay {
  0%,
  100%,
  40% {
    transform: scaleY(0.4);
    -webkit-transform: scaleY(0.4);
  }
  20% {
    transform: scaleY(1);
    -webkit-transform: scaleY(1);
  }
}
body {
  font-size: 14px;
  color: #000;
  font-family: "Helvetica Neue", Helvetica, STHeiTi, sans-serif !important;
  /*是设备默认的字体*/
  background: #f7f7f7;
}
ol,
ul {
  list-style: none;
}
a {
  text-decoration: none;
  color: #333;
}
a:hover {
  color: #333;
  text-decoration: none;
}
input,
textarea {
  border: none;
  outline: none;
  resize: none;
  /*特殊的属性定义  清楚浏览器给input自带的样式*/
  -webkit-appearance: none;
  /*组建默认的样式为空*/
}
/*common css  也就是我们共用的css*/
.f_left {
  float: left;
}
.f_right {
  float: right;
}
.clearfix::after,
.clearfix::before {
  content: ".";
  line-height: 0;
  height: 0;
  display: block;
  visibility: hidden;
  clear: both;
}
.clearfix {
  *zoom: 1;
}
.show {
  display: block;
}
.hide {
  display: none;
}
.top_5 {
  top: 5px;
}
/*头部开始*/
div.head {
  height: 50px;
  width: 100%;
  background: #ff841d;
  border-bottom: 1px solid #e6e6e6;
}
div.head a:nth-of-type(1) {
  width: 240px;
  height: 25px;
  margin: 13px 0 0 12px;
}
div.head a:nth-of-type(1) img {
  width: 185px;
}
div.head a:nth-of-type(2) {
  width: 48px;
  height: 48px;
  margin-top: 10px;
}
div.head a:nth-of-type(2) img {
  width: 34px;
}
.search {
  width: 100%;
  height: 50px;
  border-bottom: 1px solid #e6e6e6;
}
.search form {
  display: block;
  width: 90%;
  height: 30px;
  margin-top: 10px;
  position: relative;
  padding-left: 10px;
  border: none;
}
.search form input:nth-of-type(1) {
  display: block;
  width: 100%;
  height: 30px;
  border-radius: 15px;
  background: #f1f1f1;
  padding-left: 5%;
}
.search form input:nth-of-type(2) {
  position: absolute;
  right: 0;
  top: 0;
  width: 63px;
  height: 30px;
  border-radius: 15px;
  background: #ff841d;
}
/*头部结束*/
/*底部开始*/
footer {
  width: 100%;
  background: #efefef;
}
footer .foot {
  width: 100%;
  border: 1px solid #ccc;
  border-top: none;
  font-size: 12px;
  padding: 10px 0;
  text-align: center;
}
footer .foot .app {
  color: red;
}
footer .foot .phone {
  color: #333;
}
footer .foot span {
  color: #333;
}
footer .foot p {
  color: #333;
  text-align: center;
}
footer > p {
  margin-top: 10px;
}
footer > p .logn {
  width: 30%;
  border-right: none;
}
footer > p > a {
  float: left;
  display: inline-block;
  border: 1px solid #ccc;
  height: 36px;
  line-height: 36px;
  text-align: center;
}
footer > p .signin {
  width: 30%;
  border-right: none;
}
footer > p .toTop {
  width: 40%;
}
footer > p .toTop img {
  width: 15px;
  margin-right: 3px;
}
/*底部结束*/
/*促销开始*/
.cuxiao,
.pinpai {
  display: block;
  width: 100%;
  height: 36px;
  background: #ff841d;
}
.cuxiao span,
.pinpai span {
  color: #fff;
  line-height: 35px;
  height: 35px;
  font-size: 18px;
  font-weight: bold;
  padding-left: 10px;
}
.cuxiao img,
.pinpai img {
  width: 20px;
  float: right;
  margin: 8px 10px 0 0;
}
/*促销结束*/
/*三级菜单开始*/
.main {
  position: relative;
  margin-bottom: 50px;
}
.main > .nav {
  width: 100%;
  height: 40px;
  line-height: 40px;
  padding: 0 10px;
  background: #ccc;
}
.main > .nav a {
  display: inline-block;
}
.main > .nav button {
  height: 30px;
  width: 40px;
  margin-top: 5px;
  line-height: 30px;
  border-radius: 5px;
}
.main .page {
  width: 100%;
  margin: 20px 0;
  height: 34px;
  text-align: center;
  position: absolute;
  bottom: -50px;
}
.main .page button {
  float: left;
  width: 33%;
  height: 34px;
  border-radius: 5px;
}
.main .page ul {
  float: left;
  width: 33%;
  padding: 0 10px;
  border: 1px solid #ccc;
  background: #fff;
}
.main .page ul li {
  text-align: center;
  width: 100%;
  height: 34px;
  line-height: 34px;
  z-index: 10;
}
.pro_list {
  width: 100%;
}
.pro_list li {
  margin: 0;
  padding: 10px 8px;
  width: 100%;
}
.pro_list li a.media_list {
  display: block;
  width: 100%;
  height: 100%;
}
.media-left > img {
  display: block;
  width: 120px;
  height: 120px;
}
.media-body .p1 {
  color: #333333;
  word-break: break-all;
  font-size: 15px;
  line-height: 28px;
  height: 56px;
  overflow: hidden;
  -webkit-line-clamp: 2;
  display: -webkit-box;
  -webkit-box-orient: vertical;
}
.media-body .p2 {
  color: #ed0000;
  font-size: 18px;
  overflow: hidden;
  margin-top: 6px;
}
.media-body .p3 {
  color: #a1a1a1;
  line-height: 21px;
}
/*三级菜单结束*/
/*页面加载动画开始*/
.spinner {
  margin: 100px auto;
  width: 50px;
  height: 60px;
  text-align: center;
  font-size: 10px;
  position: fixed;
  right: 0;
  left: 0;
}
.spinner > div {
  background-color: #67CF22;
  height: 100%;
  width: 6px;
  display: inline-block;
  -webkit-animation: stretchdelay 1.2s infinite ease-in-out;
  animation: stretchdelay 1.2s infinite ease-in-out;
}
.spinner .rect2 {
  -webkit-animation-delay: -1.1s;
  animation-delay: -1.1s;
}
.spinner .rect3 {
  -webkit-animation-delay: -1s;
  animation-delay: -1s;
}
.spinner .rect4 {
  -webkit-animation-delay: -0.9s;
  animation-delay: -0.9s;
}
.spinner .rect5 {
  -webkit-animation-delay: -0.8s;
  animation-delay: -0.8s;
}
@-webkit-keyframes stretchdelay {
  0%,
  100%,
  40% {
    -webkit-transform: scaleY(0.4);
  }
  20% {
    -webkit-transform: scaleY(1);
  }
}
@keyframes stretchdelay {
  0%,
  100%,
  40% {
    transform: scaleY(0.4);
    -webkit-transform: scaleY(0.4);
  }
  20% {
    transform: scaleY(1);
    -webkit-transform: scaleY(1);
  }
}
/*页面加载动画结束*/
